<template>
  <div class="gl-item por" @click="callback" :class="{'no-item': !name}">
    <template>
      <div class="operation-icon abs-m tac">
        <img :src="icon" class="inner vam">
      </div>
      <div class="name">{{name}}</div>
      <div class="right abs-m clearfix">
        <div class="value-text fl" v-show="valueText">{{valueText}}</div>
        <img class="right-ico vam" src="../images/center/right.png">
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    name: "GlItem",
    props: {
      icon: {
        type: String,
        default: '',
      },
      valueText: {
        type: String,
        default: '',
      },
      name: {
        type: String,
        default: '',
      },
      value: {
        type: String | Number,
        default: 0,
      },
    },
    methods: {
      callback() {
        let {icon, name, value} = this;
        this.$emit('check', {icon, name, value});
      },
    },
  }
</script>

<style scoped lang="less">
  .no-item {
    opacity: 0;
    height: 0;
    overflow: hidden;
  }

  .gl-item {
    padding: 0 3.13rem;
    line-height: 3.75rem;
    .operation-icon {
      left: .94rem;
      width: 1.38rem;
      .inner {
        max-width: 1.38rem;
        max-height: 1.38rem;
      }
    }
    .right {
      right: .94rem;
      .right-ico {
        right: .94rem;
        width: .41rem;
      }
      .value-text {
        margin-right: .6rem;
        color: #666;
        font-size: .88rem;
      }
    }

    &:not(:last-child) {
      border-bottom: #eee .06rem solid;
    }
  }
</style>
